<template>
    <div class="main-container">
        <main class="main">
            <h1>个人信息</h1>
            <el-form :model="form">
                <el-form-item label="账号">
                    <el-input v-model="form.stuID" readonly></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="form.name" readonly></el-input>
                </el-form-item>
                <el-form-item label="身份">
                    <el-input v-model="form.role" readonly></el-input>
                </el-form-item>
<!--                <el-form-item label="电话">-->
<!--                    <el-input v-model="form.phone" readonly></el-input>-->
<!--                </el-form-item>-->
            </el-form>
        </main>
    </div>
</template>

<script>
import userManager from "@/UserManager";

export default {
    data() {
        return {
            form: {
                name: userManager.getName(),
                stuID: userManager.getUserId(),
                role: userManager.getPermissions(),
                // phone: '123-456-7890'
            }
        }
    }
}
</script>

<style scoped>
.main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Main Area Styles */
.main {
    margin-top:20px;

    width: 60%;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>
